<template>
  <div style="padding: 14px">
    <div class=" lightBox">
      <a-card
        :tab-list="tabListNoTitle"
        :active-tab-key="noTitleKey"
        @tabChange="(key) => onTabChange(key, 'noTitleKey')"
      >
        <div class="progressdivtime progressbox" style="width: 100%;margin: 0 auto">
          <!-- <h6 style="font-weight:normal;font-size: 14px;color: #7F8FA4;line-height: 24px;margin-bottom: 20px">{{noTitleKey==1?'产量':'报警持续时间'}} </h6> -->
          <div v-if="noTitleKey == 1">
            <div class="progressdivtime" v-for="(item, index) in DefMonthProduceDayData" :key="index">
              <span class="progressOnename colorin" v-if="item.producename">{{ item.producename }}</span>
              <span class="progressOnename colorin" v-else>{{ item.time }}</span>
              <!-- 天 -->
              <a-progress
                v-if="item.producename"
                strokeColor="#1991EB"
                style="width:70%"
                :percent="parseInt(item.rate)"
                :format="(percent) => formatPercent(percent, item.num)"
              />
              <a-progress
                v-else
                strokeColor="#1991EB"
                style="width:70%"
                :percent="item.rate"
                :format="(percent) => formatPercent(percent, item.total)"
              />
              <!-- 天 -->
            </div>
          </div>
          <div v-if="noTitleKey == 2">
            <div class="progressdivtime colorin" v-for="(item, index) in DefMonthAlarmTimeData" :key="index">
              <span class="progressOnename colorin">{{ item.uploadtime }}</span>
              <a-progress
                strokeColor="#1991EB"
                style="width:70%"
                :percent="item.rate"
                :format="(percent) => formatPercenttime(percent, item.alarmtime)"
              />
            </div>
          </div>
        </div>
      </a-card>
    </div>
  </div>
</template>

<script>
export default {
  name: 'index',
  props: {
    DefMonthProduceDayData: {
      type: Array,
      default: () => [],
    },
    DefMonthAlarmTimeData: {
      type: Array,
      default: () => [],
    },
  },
  data() {
    return {
      tabListNoTitle: [
        { key: '1', tab: '产量' },
        // { key: '2', tab: '报警持续时间' },
      ],
      noTitleKey: '1',

      formatPercent(percent, num) {
        return num + '件';
      },
      formatPercenttime(percent, time) {
        return time + '小时';
      },
    };
  },
  watch: {
    DefMonthProduceDayData(val) {
      return val;
    },
    DefMonthAlarmTimeData(val) {
      return val;
    },
  },
  methods: {
    onTabChange(key, type) {
      this[type] = key;
    },
  },
};
</script>

<style scoped lang="less">
@import '../../index';
</style>
